<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="lib/jquery.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAA4IcwRRCOi6Fv2b3nIbxOChQGaOCnSmUhRGiZvi2Xd9QiyjfnaxSIrWmoOaja1VYTgGmq1letHra6Pw"></script>
    <script type="text/javascript">
        google.load("language", "1");

        function InitLangSelectors() {
            //clear lang_selectors
            $('.lang_selector').find('option').remove();

            //Add first element (auto: AUTO DETECT)
            $('.lang_selector').append('<option value="" selected>AUTO DETECT</option>');

            //fill lang_selector using google translate api
            for (var LangName in google.language.Languages) {
                if (google.language.Languages[LangName].length == 2)
                    $('.lang_selector').append('<option value="' + google.language.Languages[LangName] + '">' + LangName + '</option>');
            }
        }
        $(document).ready(function() {
            InitLangSelectors();
        });


        function TranslateClick(){
            var sourceText = $('#source_text').val();
            //alert(sourceText);
            var fromLang = $('#select_from_lang').val();
            //alert(fromLang);
            var toLang = $('#select_to_lang').val();
            if (toLang.length == 0)
                toLang = window.navigator.language;
            //alert(toLang);
            google.language.translate(sourceText, fromLang, toLang, function(translateResult) {
                $('#result_text').val(translateResult.translation);
            })
        }
    </script>
</head>
<body>
    <div >
        <table>
            <tr>
                <td>
                    <!-- Text area for original text -->
                    <textarea ID="source_text" rows="5" cols="70">Sample text.</textarea>
                </td>
            </tr>
            <tr>
                <table>
                    <tr>
                        <td>From:</td>
                        <td>
                            <select ID="select_from_lang" class="lang_selector" />
                        </td>
                        <td>
                            <input type="button" value="Translate" onclick="TranslateClick()" />
                        </td>
                        <td>To:</td>
                        <td>
                           <select ID="select_to_lang" class="lang_selector" />
                        </td>
                    </tr>
                </table>
            </tr>
            <tr>
                <td>
                    <!-- Text area for translated text -->
                    <textarea ID="result_text" rows="5" cols="70" disabled>Translated text.</textarea>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>